<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
<jsp:include page="../inc_jqgrid.jsp"></jsp:include>
	<jsp:include page="../head.jsp"/>
<script type="text/javascript"> 
$(document).ready(function () {
	$("#jqGrid").jqGrid({
		url: 'http://trirand.com/blog/phpjqgrid/examples/jsonp/getjsonp.php?callback=?&qwery=longorders',
		mtype: "GET", 
		datatype: "jsonp",
		shrinkToFit: true,//按比例初始化列宽度
		viewrecords: true,//是否要显示总记录数
		rownumbers: true,//显示行顺序号
		rownumWidth: 35,//顺序号宽度
		multiselect: true,//定义是否可以多选
		multiboxonly: true,//为ture时只有选择checkbox才会起作用
		height : '90%', //"100%"
		rowNum: 20,//每页行数
		rowList : [ 10, 20, 55 ],//调整表格显示的记录数
		autowidth: true, 
		pager: "#jqGridPager",
		caption: "",//标题
		colModel: [
			{ label: '订单ID', name: 'OrderID', key: true, width: 75 },
			{ label: '客户ID', name: 'CustomerID', width: 150 },
			{ label: '订单日期', name: 'OrderDate', width: 150 },
			{ label: '金额', name: 'Freight', width: 150 },
			{ label:'备注', name: 'ShipName', width: 150 }
		]
	}); 
});
</script>
</head>
<body style="width:100%">
<jsp:include page="../head.jsp"></jsp:include> 
	<div class="divBox">
	    <table id="jqGrid" ></table>
	    <div id="jqGridPager"></div>
	</div>

<jsp:include page="../footer.jsp"/>
</body>
</html>